  <template>
    <div id="app">
      <component :is="currentComponent" @switch-to-register="switchToRegister" @switch-to-login="switchToLogin" @switch-to-transaction="switchToTransaction"></component>
      <!-- <TransactionComponent v-if="currentComponent === 'transaction'"/> -->
    </div>
  </template>

  <script>
  import LoginComponent from './views/LoginComponent/LoginComponent.vue'
  import RegisterComponent from './views/RegisterComponent/RegisterComponent.vue'
  import TransactionComponent from './views/TransactionComponent/TransactionComponent.vue'
  import HomeComponent from './views/HomePage.vue'
  import router from './router/index.js' // 导入路由实例

  export default {
    data () {
      return {
        currentComponent: HomeComponent // 初始化时默认为 HomeComponent
      }
    },
    components: {
      login: LoginComponent,
      register: RegisterComponent,
      transaction: TransactionComponent
    },
    methods: {
      switchToRegister () {
        this.currentComponent = RegisterComponent // 切换到 RegisterComponent
      },
      switchToLogin () {
        this.currentComponent = LoginComponent // 切换到 LoginComponent
      },
      switchToTransaction () {
        this.currentComponent = TransactionComponent// 切换到交易获取页面
      }
    },
    beforeRouteEnter (to, from, next) {
      // 监听登录成功事件，在收到事件时切换到交易获取页面
      next(vm => {
        vm.$on('login-success', () => {
          console.log('Login success event received!') // 调试语句，确认事件是否被捕获
          // 手动进行页面路由导航到交易获取页面
          router.push('/transaction')
        })
      })
    }
  }
  </script>

  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>
